<template>
	<div class="w-[150px] flex text-white text-[14px]">
		<div class="basis-1/2 flex justify-end">
			<match-cards
				inverse
				:red-cards="homeRedCards"
				:yellow-cards="homeYellowCards"
				:corners="homeCorners"
				class="relative -top-1 right-1" />
			<base-number-flip :value="homeScore" />
		</div>
		<div class="mx-1">:</div>
		<div class="basis-1/2 flex">
			<base-number-flip :value="awayScore" />
			<match-cards
				:red-cards="awayRedCards"
				:yellow-cards="awayYellowCards"
				:corners="awayCorners"
				class="relative -top-1 left-1" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseNumberFlip } from '@/components/base'
import MatchCards from '../match-cards/index.vue'
defineProps({
	homeScore: {
		type: String
	},
	awayScore: {
		type: String
	},
	homeRedCards: {
		type: String
	},
	awayRedCards: {
		type: String
	},
	homeYellowCards: {
		type: String
	},
	awayYellowCards: {
		type: String
	},
	homeCorners: {
		type: String
	},
	awayCorners: {
		type: String
	}
})
</script>
